<template>
  <div class="table-page">
    <!-- 员工管理 -->
    <div class="title-box">查询表格</div>
    <a-form label-align="right" auto-label-width :model="form" class="form">
      <a-row :gutter="16" wrap>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-form-item field="user_name" label="查询员工">
            <a-input v-model="form.user_name" placeholder="请输入员工姓名" />
          </a-form-item>
        </a-col>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-space>
            <a-button type="primary" @click="getTableData">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <!-- <a-button @click="handleReset">
              <template #default>重置</template>
            </a-button> -->
            <a-button type="primary" @click="handleOpenCreatOrEdit()">
              <template #icon>
                <icon-plus :size="18" />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <section class="table-box">
      <a-table
        row-key="id"
        size="small"
        page-position="bl"
        :bordered="{ cell: true }"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #columns>
          <a-table-column title="ID" :width="68" data-index="id"> </a-table-column>
          <a-table-column title="最后登录时间" data-index="logintime">
            <template #cell="{ record }">
              {{ record.logintime && format(new Date(record.logintime * 1000), 'yyyy-MM-dd HH:mm:ss') }}
            </template>
          </a-table-column>
          <a-table-column title="用户姓名" data-index="username"></a-table-column>
          <a-table-column title="用户手机号" data-index="mobile"></a-table-column>

          <a-table-column title="状态" data-index="user_name">
            <template #cell="{ record }">
              <a-tag v-if="record.status === 'normal'" color="blue">启用中</a-tag>
              <a-tag v-if="record.status === 'stop'">禁用</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="200" align="center" fixed="right">
            <template #cell="{ record }">
              <a-space>
                <a-link @click="handleOpenCreatOrEdit(record.id)">
                  <template #default>编辑</template>
                </a-link>
                <a-popconfirm content="确认删除?" @ok="handleDelete(record)">
                  <a-link status="danger">
                    <template #default>删除</template>
                  </a-link>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </section>
    <creatModal @reFreshTable="getTableData" ref="creatModalRef"></creatModal>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { usePagination } from '@/hooks'
import { getUserList, deleteUser } from '@/apis'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { format } from 'date-fns'
import creatModal from './creat-modal.vue'

const creatModalRef = ref(null)
const router = useRouter()
const form = reactive({
  user_name: ''
})

const loading = ref(false)
const tableData = ref([])

const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => getTableData())

const getTableData = async () => {
  loading.value = true
  const resData = await getUserList({
    page: current.value,
    pagesize: pageSize.value,
    ...form
  })

  if (resData.code == 1) {
    tableData.value = resData.data.rows
    setTotal(resData.data.total)
    loading.value = false
  } else {
    loading.value = false
  }
}
getTableData()
const handleReset = () => {
  form.user_name = ''
  getTableData()
}
const handleDelete = (record) => {
  deleteUser({ user_id: record.id }).then((res) => {
    if (res.code == 1) {
      Message.success(res.msg)
      getTableData()
    } else {
      Message.error(res.msg)
    }
  })
}
// 树形遍历
function transformTree(data) {
  return data.map((node) => ({
    value: node.id,
    label: node.name,
    children: node?.child?.length > 0 ? transformTree(node.child) : null
  }))
}
const handleOpenCreatOrEdit = (id) => {
  if (id) {
    creatModalRef.value.show(id)
  } else {
    creatModalRef.value.show()
  }
}
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .title-box {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .form {
    margin-top: 12px;
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  .operation-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .table-box {
    flex: 1;
    overflow: hidden;
    margin-top: 12px;
  }
}
</style>
